<template>
  <div>
  <div class="notes-container">
    <!-- 页面头部区域 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">我的笔记</h1>
        <p class="page-subtitle">记录学习过程中的重要知识点</p>
      </div>
      <div class="header-right">
        <!-- 新建笔记按钮 -->
        <el-button type="primary" :icon="Plus" @click="handleCreateNote">
          新建笔记
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-bar">
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索笔记标题或内容..."
          :prefix-icon="Search"
          clearable
          @input="handleSearch"
        />
      </div>
      <div class="filter-group">
        <el-select v-model="selectedSubject" placeholder="选择学科" clearable @change="handleFilter">
          <el-option
            v-for="subject in subjects"
            :key="subject.id"
            :label="subject.name"
            :value="subject.id"
          />
        </el-select>
        <el-select v-model="selectedTag" placeholder="选择标签" clearable @change="handleFilter">
          <el-option
            v-for="tag in tags"
            :key="tag.id"
            :label="tag.name"
            :value="tag.id"
          />
        </el-select>
      </div>
    </div>

    <!-- 笔记列表区域 -->
    <div class="notes-content">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading-container">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>正在加载笔记...</span>
      </div>

      <!-- 空状态 -->
      <div v-else-if="filteredNotes.length === 0" class="empty-container">
        <el-icon :size="64" color="#909399"><Document /></el-icon>
        <p class="empty-text">暂无笔记</p>
        <p class="empty-subtext">点击右上角"新建笔记"开始记录你的学习内容</p>
      </div>

      <!-- 笔记列表 -->
      <div v-else class="notes-grid">
        <div
          v-for="note in filteredNotes"
          :key="note.id"
          class="note-card"
          @click="handleEditNote(note)"
        >
          <!-- 笔记卡片头部 -->
          <div class="note-header">
            <h3 class="note-title">{{ note.title }}</h3>
            <div class="note-actions">
              <el-button
                type="danger"
                :icon="Delete"
                circle
                size="small"
                @click.stop="handleDeleteNote(note)"
              />
            </div>
          </div>

          <!-- 笔记内容预览 -->
          <div class="note-content">
            <p class="note-preview">{{ getNotePreview(note.content) }}</p>
          </div>

          <!-- 笔记元信息 -->
          <div class="note-meta">
            <div class="note-subject">
              <el-tag size="small" :type="getSubjectType(note.subject)">
                {{ getSubjectName(note.subject) }}
              </el-tag>
            </div>
            <div class="note-tags">
              <el-tag
                v-for="tag in note.tags"
                :key="tag"
                size="small"
                effect="plain"
                style="margin-right: 4px;"
              >
                {{ getTagName(tag) }}
              </el-tag>
            </div>
            <div class="note-time">
              <el-icon :size="12"><Clock /></el-icon>
              <span>{{ formatTime(note.updatedAt) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建/编辑笔记对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEditMode ? '编辑笔记' : '新建笔记'"
      width="700px"
      :close-on-click-modal="false"
    >
      <div class="note-form">
        <el-form ref="noteFormRef" :model="noteForm" label-width="80px">
          <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入标题' }]">
            <el-input v-model="noteForm.title" placeholder="请输入笔记标题" />
          </el-form-item>
          
          <el-form-item label="学科" prop="subject" :rules="[{ required: true, message: '请选择学科' }]">
            <el-select v-model="noteForm.subject" placeholder="选择学科">
              <el-option
                v-for="subject in subjects"
                :key="subject.id"
                :label="subject.name"
                :value="subject.id"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="标签" prop="tags">
            <el-select v-model="noteForm.tags" multiple placeholder="选择标签">
              <el-option
                v-for="tag in tags"
                :key="tag.id"
                :label="tag.name"
                :value="tag.id"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="内容" prop="content" :rules="[{ required: true, message: '请输入内容' }]">
            <el-input
              v-model="noteForm.content"
              type="textarea"
              :rows="10"
              placeholder="请输入笔记内容..."
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveNote" :loading="isSaving">
            {{ isEditMode ? '保存' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
</template>

<script setup lang="ts">
// 小白注释：导入需要的Vue函数和Element Plus组件
import { ref, computed, onMounted, watch, type Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Delete, Clock, Document, Loading } from '@element-plus/icons-vue'

// 小白注释：设置组件的名字为多词，避免 ESLint 提示（multi-word-component-names）
// 你可以理解为“给页面正式起个名字”，这里叫 NotesPage
defineOptions({ name: 'NotesPage' })

// 小白注释：定义笔记数据类型
interface Note {
  id: string
  title: string
  content: string
  subject: string
  tags: string[]
  createdAt: string
  updatedAt: string
}

// 小白注释：表单类型，明确 tags 是 string[]，避免 TS 推断为 never[]
interface NoteForm {
  title: string
  content: string
  subject: string
  tags: string[]
}

interface Subject {
  id: string
  name: string
  type: string
}

interface Tag {
  id: string
  name: string
}

// 小白注释：响应式数据，就像Excel表格一样，数据变了界面会自动更新
const searchKeyword = ref('')  // 搜索关键词
const selectedSubject = ref('')  // 选中的学科
const selectedTag = ref('')  // 选中的标签
const isLoading = ref(false)  // 是否正在加载
const isSaving = ref(false)  // 是否正在保存
const dialogVisible = ref(false)  // 对话框是否显示
const isEditMode = ref(false)  // 是否是编辑模式
const currentEditingNote: Ref<Note | null> = ref(null)  // 当前编辑的笔记

// 小白注释：模拟数据，就像Excel里的示例数据一样
const notes: Ref<Note[]> = ref([
  {
    id: '1',
    title: '数学函数的基本概念',
    content: '函数是一种特殊的对应关系，每个输入值都有唯一的输出值。函数可以用解析式、图像、表格等方式表示。',
    subject: 'math',
    tags: ['基础概念', '重要'],
    createdAt: '2025-11-01T10:00:00',
    updatedAt: '2025-11-01T10:00:00'
  },
  {
    id: '2',
    title: '英语语法：现在完成时',
    content: '现在完成时表示过去发生的动作对现在造成的影响，结构：have/has + 过去分词。常见时间状语：already, yet, just, ever, never。',
    subject: 'english',
    tags: ['语法', '时态'],
    createdAt: '2025-11-02T14:30:00',
    updatedAt: '2025-11-02T14:30:00'
  },
  {
    id: '3',
    title: '物理力学公式总结',
    content: '牛顿第二定律：F=ma\n动能定理：W=ΔEk\n动量守恒：p1+p2=p1′+p2′\n这些公式在解决力学问题时非常重要。',
    subject: 'physics',
    tags: ['公式', '力学'],
    createdAt: '2025-11-03T09:15:00',
    updatedAt: '2025-11-03T09:15:00'
  }
])

const subjects: Ref<Subject[]> = ref([
  { id: 'math', name: '数学', type: 'primary' },
  { id: 'chinese', name: '语文', type: 'success' },
  { id: 'english', name: '英语', type: 'warning' },
  { id: 'physics', name: '物理', type: 'danger' },
  { id: 'chemistry', name: '化学', type: 'info' }
])

const tags: Ref<Tag[]> = ref([
  { id: '基础概念', name: '基础概念' },
  { id: '公式', name: '公式' },
  { id: '语法', name: '语法' },
  { id: '重要', name: '重要' },
  { id: '易错点', name: '易错点' },
  { id: '解题技巧', name: '解题技巧' }
])

// 小白注释：表单数据，就像填写表格一样（显式类型，避免类型报错）
const noteForm = ref<NoteForm>({
  title: '',
  content: '',
  subject: '',
  tags: []
})
// 小白注释：这是表单的引用，用来在需要时调用校验等方法
const noteFormRef = ref()

// 小白注释：计算属性，就像Excel的公式一样，会根据数据自动计算结果
const filteredNotes = computed(() => {
  let result = notes.value

  // 根据搜索关键词筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(note => 
      note.title.toLowerCase().includes(keyword) ||
      note.content.toLowerCase().includes(keyword)
    )
  }

  // 根据学科筛选
  if (selectedSubject.value) {
    result = result.filter(note => note.subject === selectedSubject.value)
  }

  // 根据标签筛选
  if (selectedTag.value) {
    result = result.filter(note => note.tags.includes(selectedTag.value))
  }

  return result
})

/**
 * 小白注释：搜索笔记
 * 做了什么：读取搜索框关键词，配合计算属性实时过滤列表；
 * 提示：这里已用计算属性实现过滤，所以函数里主要做日志或扩展。
 */
const handleSearch = () => {
  // 搜索功能已经通过计算属性自动实现了
  console.log('搜索关键词：', searchKeyword.value)
}

/**
 * 小白注释：筛选笔记
 * 做了什么：根据“学科”和“标签”两个下拉框的选择过滤结果；
 * 提示：实际过滤也在计算属性里完成，这里可做扩展或埋点。
 */
const handleFilter = () => {
  // 筛选功能已经通过计算属性自动实现了
  console.log('筛选条件：', selectedSubject.value, selectedTag.value)
}

/**
 * 小白注释：新建笔记
 * 做了什么：重置表单，进入“新增模式”，打开弹窗；
 * 触发：点击页面右上角“新建笔记”按钮。
 */
const handleCreateNote = () => {
  // 重置表单
  noteForm.value = {
    title: '',
    content: '',
    subject: '',
    tags: []
  }
  isEditMode.value = false
  currentEditingNote.value = null
  dialogVisible.value = true
}

/**
 * 小白注释：编辑笔记
 * 做了什么：把卡片的数据放到表单里，进入“编辑模式”，打开弹窗；
 * 触发：点击某个笔记卡片。
 */
const handleEditNote = (note: Note) => {
  // 填充表单数据
  noteForm.value = {
    title: note.title,
    content: note.content,
    subject: note.subject,
    // 小白注释：复制一个新数组，避免直接改到原数据
    tags: [...note.tags]
  }
  isEditMode.value = true
  currentEditingNote.value = note
  dialogVisible.value = true
}

/**
 * 小白注释：删除笔记
 * 做了什么：弹出二次确认，确认后把笔记从数组中移除；
 * 触发：点击卡片右上角的“删除”按钮。
 */
const handleDeleteNote = async (note: Note) => {
  try {
    // 确认删除
    await ElMessageBox.confirm(
      `确定要删除笔记"${note.title}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 从数组中删除
    const index = notes.value.findIndex(n => n.id === note.id)
    if (index > -1) {
      notes.value.splice(index, 1)
    }
    
    ElMessage.success('删除成功')
  } catch {
    // 小白注释：这里是“用户点了取消”，不需要用错误变量，所以省略参数，避免 ESLint 提示未使用变量
    console.log('取消删除')
  }
}

/**
 * 小白注释：保存笔记（新增或编辑）
 * 做了什么：先校验表单，再根据模式决定是“更新旧笔记”还是“创建新笔记”。
 * 交互：保存成功后关闭弹窗，失败则友好提示。
 */
const handleSaveNote = async () => {
  // 验证表单
  if (!noteForm.value.title || !noteForm.value.content || !noteForm.value.subject) {
    ElMessage.warning('请填写完整信息')
    return
  }

  isSaving.value = true

  try {
    if (isEditMode.value && currentEditingNote.value) {
      // 编辑模式：更新现有笔记
      const index = notes.value.findIndex(n => n.id === currentEditingNote.value!.id)
      if (index > -1) {
        // 小白注释：避免可选属性推断问题，显式构造所有必填字段
        const prev = notes.value[index]!
        const updated: Note = {
          id: prev.id,
          createdAt: prev.createdAt,
          title: noteForm.value.title,
          content: noteForm.value.content,
          subject: noteForm.value.subject,
          tags: [...noteForm.value.tags],
          updatedAt: new Date().toISOString()
        }
        notes.value[index] = updated
      }
      ElMessage.success('保存成功')
    } else {
      // 新建模式：添加新笔记
      const newNote: Note = {
        id: Date.now().toString(),
        title: noteForm.value.title,
        content: noteForm.value.content,
        subject: noteForm.value.subject,
        tags: [...noteForm.value.tags],
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString()
      }
      notes.value.unshift(newNote)  // 添加到数组开头
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('保存失败，请重试')
    console.error('保存笔记失败:', error)
  } finally {
    isSaving.value = false
  }
}

/**
 * 小白注释：生成笔记预览
 * 做了什么：截取前100个字符，加“...”，用于卡片预览。
 */
const getNotePreview = (content: string) => {
  // 只显示前100个字符
  return content.length > 100 ? content.substring(0, 100) + '...' : content
}

/**
 * 小白注释：根据学科ID拿中文名
 * 做了什么：在 subjects 列表里查找并返回 name。
 */
const getSubjectName = (subjectId: string) => {
  const subject = subjects.value.find(s => s.id === subjectId)
  return subject ? subject.name : '未知学科'
}

/**
 * 小白注释：根据学科ID拿类型（用于样式）
 */
const getSubjectType = (subjectId: string) => {
  const subject = subjects.value.find(s => s.id === subjectId)
  return subject ? subject.type : 'info'
}

/**
 * 小白注释：根据标签ID拿标签名
 */
const getTagName = (tagId: string) => {
  const tag = tags.value.find(t => t.id === tagId)
  return tag ? tag.name : tagId
}

const formatTime = (timeString: string) => {
  const date = new Date(timeString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 小白注释：页面加载时执行的操作
onMounted(() => {
  // 小白注释：初始化加载本地存储的笔记数据，刷新也不丢
  try {
    const saved = localStorage.getItem('notes')
    if (saved) {
      const parsed = JSON.parse(saved)
      if (Array.isArray(parsed)) {
        notes.value = parsed as Note[]
      }
    }
  } catch (e) {
    console.warn('本地笔记解析失败:', e)
  }
  console.log('笔记页面加载完成')
})
watch(notes, (val) => {
  // 小白注释：只要笔记有变化（新增/编辑/删除），就保存到浏览器本地
  try {
    localStorage.setItem('notes', JSON.stringify(val))
  } catch (e) {
    console.error('保存到本地失败:', e)
  }
}, { deep: true })
</script>

<style scoped>
/* 小白注释：样式代码，让页面看起来更好看 */

/* 容器样式 */
.notes-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
  font-weight: 600;
}

.page-subtitle {
  margin: 8px 0 0 0;
  color: #909399;
  font-size: 14px;
}

/* 搜索和筛选栏 */
.search-filter-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-box {
  flex: 1;
  max-width: 300px;
}

.filter-group {
  display: flex;
  gap: 12px;
}

/* 笔记内容区域 */
.notes-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  min-height: 400px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.loading-container .el-icon {
  font-size: 32px;
  margin-bottom: 16px;
  animation: rotating 2s linear infinite;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-text {
  font-size: 16px;
  margin: 16px 0 8px 0;
  color: #606266;
}

.empty-subtext {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

/* 笔记网格 */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* 笔记卡片 */
.note-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.note-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.note-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.note-card:hover .note-actions {
  opacity: 1;
}

.note-content {
  margin-bottom: 16px;
}

.note-preview {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.note-time {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* 对话框样式 */
.note-form {
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notes-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .search-filter-bar {
    flex-direction: column;
  }
  
  .search-box {
    max-width: none;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-group .el-select {
    flex: 1;
  }
  
  .notes-grid {
    grid-template-columns: 1fr;
  }
}

/* 动画效果 */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>